<template>
    <view class="content">
        <view class="nav">
            <view class="nav-i" :class="{active : type == 0}" @click="chooseNav(0)">全部</view>
            <view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">
                待支付
                <view class="ord-num" :class="{'ord-num2' : count.count1 > 9 }" v-if="count.count1 > 0">
                    {{count.count1 > 99 ? '99+' : count.count1}}
                </view>
            </view>
            <view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">
                待发货
                <view class="ord-num" :class="{'ord-num2' : count.count2 > 9 }" v-if="count.count2 > 0">
                    {{count.count2 > 99 ? '99+' : count.count2}}
                </view>
            </view>
            <view class="nav-i" :class="{active : type == 3}" @click="chooseNav(3)">
                运输中
                <view class="ord-num" :class="{'ord-num2' : count.count3 > 9 }" v-if="count.count3 > 0">
                    {{count.count3 > 99 ? '99+' : count.count3}}
                </view>
            </view>
            <view class="nav-i" :class="{active : type == 4}" @click="chooseNav(4)">已到达</view>
            <view class="nav-i" :class="{active : type == 5}" @click="chooseNav(5)">已完成</view>
            <view class="nav-i" :class="{active : type == 6}" @click="chooseNav(6)">已取消</view>
        </view>
        
        <view class="box" v-for="(item, index) in list" :key="index" @click="toDetails(item)">
            <view class="top">
                <view class="item u-flex-1">
                    <view class="left">订单编号</view>
                    <view class="right">{{item.out_trade_no}}</view>
                </view>
        		<!-- cancel_status 1取消中 2通过 3驳回 -->
                <view class="o-sta" v-if="type == 0 && item.cancel_status == 1">取消中</view>
        		<view class="o-sta" v-if="type == 0 && item.cancel_status == 2">通过</view>
        		<view class="o-sta" v-if="type == 0 && item.cancel_status == 3">驳回</view>
                <view class="o-sta1" v-if="item.order_type == 1">零担</view>
                <view class="o-sta2" v-if="item.order_type == 2">包车</view>
            </view>
            <view class="item">
                <view class="left">运输线路</view>
                <view class="right">{{item.line}}</view>
            </view>
            <view class="item">
                <view class="left">始发地</view>
                <view class="right">{{item.origin}}</view>
            </view>
            <view class="item">
                <view class="left">目的地</view>
                <view class="right">{{item.destination}}</view>
            </view>
            <view class="item">
                <view class="left">装车地点</view>
                <view class="right">{{item.loading_site}}</view>
            </view>
            <view class="item">
                <view class="left">发车时间</view>
                <view class="right">{{item.start_time}}</view>
            </view>
            <view class="item">
                <view class="left">运费</view>
                <view class="right price">
                    ￥<text class="price-num">{{item.order_amount}}</text>
                </view>
            </view>
        	
        	<!-- status = 1待支付 2待发货 3运输中 4已到达 5已完成 6已取消 -->
            <view class="btns" v-if="type != 6">
				<!-- pay_status=1未支付 2已支付 -->
        		<!-- order_type = 1零担--已完成 时 支付；order_type = 2包车--除了已取消，其他状态都能支付  $noMultipleClicks(toPay,item) -->
                <view class="btn1" v-if="item.order_type == 1 && item.status == 5 && item.pay_status == 1">去结算</view>
        		<view class="btn1" v-if="item.order_type == 2 && item.status != 6 && item.pay_status == 1">去结算</view>
                <view class="btn1" @click.stop="again(item)">再来一单</view>
                <view class="btn2" v-if="item.status == 1 || item.status == 2" @click.stop="cancel(item)">取消订单</view>
                <!-- <view class="btn3" v-if="item.status == 3">查看物流</view> -->
            </view>
        </view>
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <!-- 取消原因 -->
        <u-popup mode="bottom" v-model="show" :closeable="true" border-radius="20">
            <view class="popup">
                <view class="pop-title">取消原因</view>
                <template v-if="isShowInput">
                    <textarea v-model="content" placeholder="请输入取消原因内容" :auto-height="true" class="t-inp"></textarea>
                </template>
                <view class="pop-tip">提示: 取消订单由发货管理员根据现场装车情况审核后反馈您</view>
                <view class="pop-btn" @click="doRate">提交</view>
            </view>
        </u-popup>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#00457f" inactive-color="#5d5f6a" :border-top="true" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [],
                identity: '',//1用户 2司机 3领导
				
				noClick: true,//连点
				show: false,
				isShowInput: false,//输入框 延迟显示
				content: '',
				type: 0,
				count: {},
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [],
				item: {},
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
			uni.$on('OPEN_ORDER', data => {
				// console.log('OPEN_ORDER', data)
				this.type = data
			})
			
            // 接收身份监听
            uni.$on('identityChange', data => {
                this.tabbarInfo();
            })
        },
        onShow() {
            this.tabbarInfo();
			
			if (this.$getSync('userToken')) {
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '登录后可以查看订单，是否去登录？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
							    url: "/pagesA/login/login"
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: `/pages/tabbar/index`
							})
						}
					}
				});
			}
        },
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
			// 再来一单
			again(item) {
				if (item.order_type == 1) {
					// 零担
					this.$gTo(`/pages/ld-send/ld-add?order_id_again=${item.id}&isAgain=1`)
				} else {
					// 包车
					this.$gTo(`/pages/bus/bus-add?order_id_again=${item.id}&isAgain=1`)
				}
			},
			
			// 去结算
			// toPay(item) {
			// 	console.log(item)
			// 	this.$gTo(`/pages/pay/pay?id=${item.id}&money=${item.order_amount}&balance=${item.balance}`)
			// },
			
			toDetails(item) {
				this.$gTo(`/pages/order/details?id=${item.id}&status=${item.status}&pay_status=${item.pay_status}`)
			},
			
			chooseNav(num) {
				if (this.type == num) return
			    this.type = num
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
			},
			
			// 取消订单
			cancel(item){
				this.item = item
			    this.show = true
			    setTimeout(() => {
			        this.isShowInput = true;
			    });
			},
			doRate() {
				if (!this.content) {
					this.$toast('请输入取消原因')
					return
				}
				this.$ajax('cancel_orders', {
					user_token: this.$getSync('userToken'),
					order_id: this.item.id,//订单id
					cancel_reason: this.content,//取消原因
				}).then(ret => {
					if (ret.success == 1000) {
						this.show = false
						this.isShowInput = false
						this.$toast('已提交')
						setTimeout(() => {
							this.item = {}
							this.content = ''
							this.list = []
							this.page = 1
							this.status = 'loadmore'
							this.getList()
						}, 500)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('select_orders', {
					user_token: this.$getSync('userToken'),
					page: this.page,
					limit: 10,
			        status: this.type,//0全部 1待支付 2待发货 3运输中 4已到达 5已完成 6已取消
				}).then(ret => {
					if (ret.success == 1000) {
						this.count = ret.detail
						if (ret.detail && ret.detail.orders && ret.detail.orders.length > 0) {
							this.list = this.list.concat(ret.detail.orders);
							this.page++;
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$toast(ret.msg);
					}
				});
			},
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            tabbarInfo(){
                // 用户
                if (this.$getSync('identity') == 1) {
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '发货',
                            pagePath: "/pages/tabbar/index"
                        },{
                            iconPath: "/static/icon/tab_03.png",
                            selectedIconPath: "/static/icon/tab_04.png",
                            text: '订单',
                            pagePath: "/pages/tabbar/order"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/mine"
                        }
                    ];
                }
                // 司机
                if(this.$getSync('identity') == 2){
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '首页',
                            pagePath: "/pages/tabbar/driver"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/driver-mine"
                        }
                    ];
                }
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #eef1f6;
    }
    .content{
        padding-bottom: 50rpx;
		border-top: 2rpx solid #e6e6e6;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #ebebeb;
        background-color: #fff;
    }
    .nav-i{
        width: calc(100vw / 7);
        font-size: 28rpx;
        text-align: center;
        position: relative;
    }
    .ord-num{
        font-size: 20rpx;
        line-height: 1;
        color: #fff;
        padding: 5rpx 8rpx;
        background-color: #fa3c07;
        border-radius: 50%;
        position: absolute;
        right: -5rpx;
        top: -20rpx;
    }
    .ord-num2{
        font-size: 20rpx;
        line-height: 1;
        color: #fff;
        padding: 6rpx 4.5rpx;
        background-color: #fa3c07;
        border-radius: 50%;
        position: absolute;
        right: -5rpx;
        top: -20rpx;
    }
    .active{
        color: #004580;
        font-weight: bold;
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 32rpx;
        height: 8rpx;
        background-color: #004580;
        position: absolute;
        bottom: -30rpx;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .box{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 40rpx 30rpx 30rpx;
        margin: 16rpx 20rpx 0;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .left{
        width: 140rpx;
        color: #656565;
    }
    .right{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .o-sta{
        font-size: 24rpx;
        color: #ff602c;
        padding-bottom: 10rpx;
        padding-left: 10rpx;
    }
    .o-sta1{
        font-size: 24rpx;
        color: #ff602c;
        padding: 7rpx 15rpx;
        background-color: #fff1ec;
        border-radius: 10rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
    }
    .o-sta2{
        font-size: 24rpx;
        color: #0075ff;
        padding: 7rpx 15rpx;
        background-color: #ebf4fe;
        border-radius: 10rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
    }
    .price{
        font-size: 26rpx;
        color: #ff602c;
    }
    .price-num{
        font-size: 38rpx;
    }
    .btns{
        padding-top: 10rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
    }
    .btn1{
        padding: 15rpx 25rpx;
        background-color: #004580;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn2{
        padding: 15rpx 25rpx;
        background-color: #9aafc2;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn3{
        padding: 15rpx 25rpx;
        background-color: #fff;
        border-radius: 50rpx;
        margin-left: 20rpx;
        color: #004580;
        border: 2rpx solid #004580;
        box-sizing: border-box;
    }
    
    
    .popup{
        padding: 30rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding-bottom: 40rpx;
    }
    .pop-tip{
        font-size: 24rpx;
        color: #fe6a00;
        padding-top: 20rpx;
        padding-bottom: 50rpx;
    }
    .t-inp{
        padding: 20rpx;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        font-size: 26rpx;
        width: 100%;
        min-height: 220rpx;
    }
    .pop-btn{
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        padding: 20rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }

</style>
